class PositionList {
  constructor (container) {
    this.container = container;

     //确定当前页码，以及每一页多少条数据
    this.page = {
      current: 1
    };
    //给this.page定义一个count属性，值为5，不能被修改(ES5)
    Object.defineProperty(this.page, "count", {
      value: 5,
      writable: false
    });

    this.createDOM().then($.proxy(this.init, this));
  }

  createDOM () {
    return new Promise(resolve => {
      $.get("/html/component/list/positionList.html", resolve);
    })
  }

  init (listTemplate) {
    // 发送请求，得到当前页的数据
    // count定义的不能被修改的属性，所以直接作为参数传递会失败，所以先解构出来，再进行传递
    let {current, count} = this.page;
    $.get(baseUrl+ "/position/get", {current, count}, $.proxy(this.handleGetPositionSucc, this, listTemplate));

    
  }

  handleGetPositionSucc (listTemplate, res) {
    
    if(res.res_code === 1){
      //由于前端的current有可能超出数据量的分页总数（比如删除最后一页的最后一条数据）
      this.page.current=res.res_body.current;
      this.page.total=res.res_body.total;
      //得到后端返回的list数据，渲染表格

      let html = new EJS({text: listTemplate})
        .render({
          list: res.res_body.list,
          current: this.page.current,
          count: this.page.count,
        });
      this.container.html(html);

      //渲染表格后,渲染分页
      new Pagination(this);
      this.bindEvents();
    }
    
  }

    bindEvents(){
        this.container.on("click","button",{list:this},function(e){
            //第三个参数传进来的{list: this}可以通过时间对象e.data得到
            //也可以在外面定义一个变量that=this,即this是positionList
            //  console.log(e.data.list); // PositionList
            let $tr=$(this).parents("tr");
            if($(this).hasClass("editBtn")){
            //编辑按钮
            e.data.list.handleEditBtnClick($tr);
            }
            else if($(this).hasClass("okBtn")){
                //确认按钮
            e.data.list.handleOkBtnClick($tr);
            }else if($(this).hasClass("cancelBtn")){
            //取消按钮
            e.data.list.handleCancelBtnClick($tr);    
            }
            else if($(this).hasClass("delBtn")){
                //删除按钮
                e.data.list.handleDelBtnClick($tr);    
                }
        })
    }
    handleEditBtnClick($tr){
        //把span的值给input里面的值
        $tr.addClass("edit").find("span").each((index,span)=>{
            //遍历到的span都是dom元素
            $(span).next().val($(span).html());
        })
    }
    handleOkBtnClick($tr){
        //把input的值给span
        $tr.removeClass("edit").find("span").each((index,span)=>{
            $(span).html($(span).next().val());
        })
    }
    handleCancelBtnClick($tr){
        $tr.removeClass("edit");
    }
    handleDelBtnClick($tr){
        if(confirm("确认删除吗")){
            $tr.remove();
        }
    }
}